<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="auto" class="main_muenu">
        <navMenu></navMenu>
      </el-aside>
      <el-container>
        <el-header>
          <navTop></navTop>
        </el-header>
        <el-main class="main_content">
          <navTabs></navTabs>
          <!-- 内容 -->
          <div class="fade-transform-box main_content_background">
            <!-- <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <keep-alive>
                  <component :is="Component" />
                </keep-alive>
              </transition>
            </router-view> -->
            <transition name="fade-transform" mode="out-in">
              <el-config-provider :locale="zhCn">
                <router-view></router-view>
              </el-config-provider>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import navTop from '@/components/Menu/navTop/navTop.vue'
import navMenu from '@/components/Menu/navMenu/navMenu.vue'
import navTabs from '@/components/Menu/navTabs/navTabs.vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn' //element-plus中文

import { useStore } from '@/store/user'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()
</script>

<style>
.fade-transform-box {
  position: relative;
  top: 0px;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
}
.main-container {
  transition: margin-left 0.45s;
  margin-left: 210px;
  min-height: 100vh;
}
.hideSideBar {
  margin-left: 64px;
}

.main_content {
  padding: 0px !important;
  background: #f7f9fb;
}
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s ease 0s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
